<template>
  <div class="go-data">
    <n-layout has-sider>
      <n-layout-sider content-style="padding: 24px;">
        <Datatable></Datatable>
      </n-layout-sider>
      <n-layout>
        <n-layout-header style="height: 100px"> 暂时没用 </n-layout-header>
        <n-layout-content
          :style="{
            height: `calc(100vh - ${superfluousHeight}px)`
          }"
          content-style="padding: 0;"
        >
          <div v-if="targetData" id="container" ref="containerRef"/>
          <div class="aic jcc h100" v-else>
            <n-result status="404" title="请点击组件类型" description="生活总归带点绿"> </n-result>
          </div>
        </n-layout-content>
        <n-layout-footer>
          <n-pagination
            :page-sizes="[20, 50, 100]"
            v-model:page="pagination.current"
            v-model:page-size="pagination.pageSize"
            :page-count="pagination.count"
            show-size-picker
            :on-update:page="handlePage"
            :on-update:page-size="handlePageSize"
          />
        </n-layout-footer>
      </n-layout>
    </n-layout>
    <filterHeader v-model="showModalConfigFilter"></filterHeader>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch, nextTick } from 'vue'
import Datatable from './component/datatable.vue'
import filterHeader from '../filterHeader.vue'
import { FlashOutline } from '@vicons/ionicons5'
import {
useReportStore
} from '@/views/Bi/store/useReportStore'
const props = defineProps({
  targetData: {
    type: Object
  }
})
import { debounce } from 'lodash'
import { PivotSheet, TableSheet, S2Event, EXTRA_FIELD, generatePalette, getPalette } from '@antv/s2'
import type { Data,Fields,Meta,SortParam } from '@antv/s2'
import { dataTool } from 'echarts'
import { useThemeVars } from 'naive-ui'
import { useBiUtils } from '@/views/Bi/hooks/BiUtils'

const superfluousHeight = 140 + 38
const showModalConfigFilter = ref(false)
let s2: any = null

// 2. 配置数据
const s2DataConfig: any = ref({
  fields: {
    columns: [] // 要展示的列头字段 id 列表
  },
  meta: [
    // 列头字段对应的元信息，比如展示的中文名
    {
      field: 'province',
      name: '省份'
    },
    {
      field: 'city',
      name: '城市'
    },
    {
      field: 'type',
      name: '类型'
    },
    {
      field: 'price',
      name: '价格'
    }
  ],
  data: []
})
const reportStore = useReportStore()
const targetData: any = computed(() => {
  if (reportStore.getTargetDataBase) {
      nextTick(() => {
           //更新配置文件 s2DataConfig
                s2DataConfig.value = reportStore.getTargetDataBase
         s2DataConfig.value.fields.columns 
      = s2DataConfig.value.meta.map(res=>{
        return res.field
      })
      if(!s2){
    
      //  s2DataConfig.value.meta = reportStore.getTargetDataBase?.meta
  
      init(reportStore.getTargetDataBase?.data)
      }else{
      
  s2.setDataCfg(s2DataConfig.value)
  s2.render()
      }
       
      })
  }
  return reportStore.getTargetDataBase
})
const pagination = ref({
  pageSize: 20,
  current: 1,
  total: 8,
  count: Math.ceil(8 / 2)
})

  const { useThemeS2Table } = useBiUtils()
  const containerRef = ref()
const init = (data: any) => {
  // 1. 准备数据
  console.log('data :>> ', data);
  s2DataConfig.value.data = data
  const container: any = containerRef.value
  // 3. 添加配置
  // 设置自定义 `icon` 的展示条件
  const headerActionIcons = [
    {
      // 选择icon,可以是 S2 自带的，也可以是自定义的 icon
      iconNames: ['customFunnel'],
      // 通过 belongsCell + displayCondition 设置 icon 的展示位置
      belongsCell: 'colCell',
      // icon 点击之后的执行函数
      action: (props: any) => {
        const { meta, event } = props
        console.log(props)
        showModalConfigFilter.value = true
      }
    }
  ]
  const filterIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><path d="M296 464a23.88 23.88 0 0 1-7.55-1.23L208.3 436.1a23.92 23.92 0 0 1-16.3-22.78V294.11a.44.44 0 0 0-.09-.13L23.26 97.54A30 30 0 0 1 46.05 48H466a30 30 0 0 1 22.79 49.54L320.09 294a.77.77 0 0 0-.09.13V440a23.93 23.93 0 0 1-24 24z" fill="currentColor"></path></svg>`
  const s2Options = {
    width: container.offsetwidth,
    height: container.offsetHeight,
    // 关闭默认icon
    showDefaultHeaderActionIcon: false,
    tooltip: {
      showTooltip: true
    },
    // 自定义 icon
    customSVGIcons: [
      {
        name: 'customFunnel',
        svg: filterIcon
      }
    ],
    headerActionIcons
  }

  
  s2 = new TableSheet(container, s2DataConfig.value, s2Options)
  console.log('s2 :>> ', s2);
  const customTheme = useThemeS2Table()

  // name 可为 default, colorful, gray
  s2.setTheme(customTheme)
  const debounceRender = debounce((width, height) => {
    s2.changeSheetSize(width, height)
    s2.render(false) // 不重新加载数据
  }, 200)

  new ResizeObserver(([entry] = []) => {
    const [size] = entry.borderBoxSize || []
    debounceRender(size.inlineSize - 272, size.blockSize - superfluousHeight)
  }).observe(document.body) // 通过监听 document.body 来实现监听窗口大小变化
  s2.render()
}

const handlePage = (page: number) => {
  pagination.value.current = page
  let data = [
    {
      province: '浙江',
      city: '杭州',
      type: '家具',
      sub_type: '桌子',
      price: '1'
    },
    {
      province: '浙江',
      city: '杭州',
      type: '家具',
      sub_type: '沙发',
      price: '2'
    },
    {
      province: '浙江',
      city: '杭州',
      type: '办公用品',
      sub_type: '笔',
      price: '3'
    },
    {
      province: '浙江',
      city: '杭州',
      type: '办公用品',
      sub_type: '纸张',
      price: '4'
    }
  ]
  data = data.map((res: any) => {
    res.city = res.city + page
    return res
  })

  handleInit(data)
}
const handlePageSize = (page: number) => {
  pagination.value.pageSize = page
}
const handleInit = (data: any) => {
  s2DataConfig.value.data = data
  s2.setDataCfg(s2DataConfig.value)
  s2.render()
}
onMounted(() => {})
//删除 模块
const handleDeleteModel = (item: any) => {}
</script>

<style lang="scss" scoped>
#container {
  // width: 100%;
  // height: 100%;
}
@include go(data) {
}
</style>
